<template>
  <div class="one">
    <el-card>
      <div class="box" ref="box">
        <div id="mountNode" class="canvasStyle"></div>
      </div>
    </el-card>
  </div>
</template>
<script>
import G6 from '@antv/g6'
import onedata from './onedata'
export default {
  data () {
    return {
      graph: {},
      w: 0
    }
  },
  mounted () {
    this.w = this.$refs.box.clientWidth
    this.createGraph()

    // console.log(this.$refs.box.clientHeight)
  },
  beforeDestroy () {
    this.graph.destroy();
  },
  methods: {
    createGraph () {
      const minimap = new G6.Minimap({
        size: [150, 100],
        className: 'minimap',
      });

      this.graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        // width: this.w,
        height: 700,
        fitView: true,
        modes: {
          default: ['drag-canvas', 'zoom-canvas'],
          // default: ['drag-canvas'],
        },
        plugins: [minimap],

        defaultNode: {

        },
        defaultEdge: {
          style: {
            stroke: '#0099CC',
            lineWidth: 3,
            endArrow: true,
          },
        },

        nodeStateStyles: {
          hover: {
            fill: '#409EE1',
          },
          click: {
            stroke: 'green',
            lineWidth: 3,
          },
        },
        edgeStateStyles: {
          click: {
            stroke: 'green',
          },
          hover: {
            lineWidth: 5,
          }
        },
      })

      // console.log(onedata)
      this.graph.data(onedata);
      this.graph.render();

      // node
      this.graph.on('node:mouseenter', (e) => {
        const nodeItem = e.item
        this.graph.setItemState(nodeItem, 'hover', true)
      })
      this.graph.on('node:mouseleave', (e) => {
        const nodeItem = e.item
        this.graph.setItemState(nodeItem, 'hover', false)
      })
      this.graph.on('node:click', (e) => {
        const clickNodes = this.graph.findAllByState('node', 'click')
        clickNodes.forEach((cn) => {
          this.graph.setItemState(cn, 'click', false)
        })
        const nodeItem = e.item
        this.graph.setItemState(nodeItem, 'click', true)
      })
      // edge
      this.graph.on('edge:mouseenter', (e) => {
        const nodeItem = e.item
        this.graph.setItemState(nodeItem, 'hover', true)
      })
      this.graph.on('edge:mouseleave', (e) => {
        const nodeItem = e.item
        this.graph.setItemState(nodeItem, 'hover', false)
      })
      this.graph.on('edge:click', (e) => {
        const clickEdges = this.graph.findAllByState('edge', 'click')
        clickEdges.forEach((ce) => {
          this.graph.setItemState(ce, 'click', false)
        })
        const edgeItem = e.item
        this.graph.setItemState(edgeItem, 'click', true)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.canvasStyle {
  text-align: center;
}
// .canvasStyle > canvas {
//   position: relative;
// }
// .minimap {
//   position: absolute;
//   left: 0;
//   bottom: 0;
//   background: #fff;
// }
</style>